<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />

    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <title>中石化BP 招募体验官</title>
</head>
<body>

    <div class="page form">
        <img src="images/form_title.png" width="100%" alt="">
        <div class="form-text">* 个人数据帮助中石化BP更好的了解用户反馈分析，不用担心数据安全</p></div>
        <div class="form-box">
            <div class="form-box-item">
                <h1>姓名</h1>
                <div class="form-input-box"><input type="text" placeholder="请输入您的姓名" /></div>
            </div>
            <div class="form-box-item">
                <h1>手机号</h1>
                <div class="form-input-box"><input type="number" placeholder="请输入您的手机号" /></div>
            </div>
            <div class="form-box-item">
                <h1>品牌</h1>
                <div class="form-input-box select">
                    <input type="text" id="brandText" placeholder="请选择品牌" />
                    <select name="brand" id="brandSelect">
                        <option value="0" style="display: none" selected="selected"></option>
                        <option value="1">111</option>
                        <option value="2">222</option>
                        <option value="3">333</option>
                    </select>
                </div>
            </div>
            <div class="form-box-item">
                <h1>车型</h1>
                <div class="form-input-box"><input type="text" placeholder="请输入车型" /></div>
            </div>
            <div class="form-box-item">
                <h1>车牌号</h1>
                <div class="form-input-box"><input type="text" placeholder="请输入您的车牌号" /></div>
            </div>
            <div class="form-box-item">
                <h1>现用油品</h1>
                <div class="form-input-box select">
                    <input type="text" id="oilText" placeholder="请选择油品" />
                    <select name="oil" id="oilSelect">
                        <option value="0" style="display: none" selected="selected"></option>
                        <option value="1">111</option>
                        <option value="2">222</option>
                        <option value="3">333</option>
                    </select>
                </div>
            </div>
            <div class="form-box-item">
                <h1>一箱油可行驶公里数</h1>
                <div class="form-input-box"><input type="number" placeholder="请输入数字" /></div>
            </div>
        </div>
        <button class="red" id="submit">提交报名</button>
    </div>

    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $('#brandSelect').change(function (e) {
            $('#brandText').val($(this).find('option:selected').html());
        });

        $('#oilSelect').change(function (e) {
            $('#oilText').val($(this).find('option:selected').html());
        });
        
        $('#submit').click(function (e) {
           window.location.href = 'certificate.html';
        });

        $('input').bind('blur',function(){
            setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
        });
    </script>
</body>
</html>